NaN

实战(pc端)

目标

腾学汇: https://tlearning.cloud.tencent.com/

代码预览地址: http://web1115.huruqing.cn/腾学汇/

(1) PC端和移动端的区别

几年前

  1. PC端页面布局 PC端布局的传统解决方案是基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。

  2. 移动端页面布局

    2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持

现在

pc和移动端都可以使用flex布局, 特殊情况下才需要使用传统布局

(2) PC端样式内容宽度

pc端的主体内容一般会设置一个宽度, 大多数是1200px

.container {
	width: 1200px;
    margin: 0 auto;
}

(3) PC端不需要特别设置viewport

(4) html和less代码

html代码

<!DOCTYPE html>
<html lang="en"> 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="//at.alicdn.com/t/font_3017680_kp1fl3uhvx.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/index.css">
    <title>腾学汇</title>
</head>

<body>
    <header class="flex jc-sb aic">
        <div class="logo">
            <img src="https://imgcache.qq.com/open_proj/proj_qcloud_v2/mc_2014/education/zhihui-college/css/img/slogan.png"
                alt="">
        </div>
        <nav class="nav">导航</nav>
        <div class="login flex aic base">
            <span class="item">
                <i class="iconfont icon-geren"></i>
                <span>登录</span>
            </span>
            <span class="item ml-10">
                <i class="iconfont icon-dingdanjihe"></i>
                <span>申请体验</span>
            </span>
        </div>
    </header>
</body>

</html>

less代码

// 头部
header {
    height: 100px;
    background-color: #fff;
    padding-left: 40px;
    padding-right: 40px;

    img {
        height: 64px;
    }

    .login {
        .item {
            // 加粗
            font-weight: 600;
            // 手势
            cursor: pointer;
            border: 1px solid #2486ff;
            padding: 8px 15px;
            border-radius: 20px;

            &:hover {
                background-color: #2486ff;
                color: #fff;
            }
        }
    }
}